---
import { useTranslations } from '@/i18n/utils'

const t = useTranslations(Astro.currentLocale)
---

<div class="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary">
  <button
    class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-xl-none"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#tocContents"
    aria-expanded="false"
    aria-controls="tocContents"
  >
    {t('toc.title')}
    <i class="bi bi-chevron-expand d-xl-none ms-2"></i>
  </button>
  <strong class="d-none d-md-block h6 my-2 ms-3" id="docs-tocs">{t('toc.title')}</strong>
  <hr class="d-none d-md-block my-2 ms-3" />
  <div class="collapse bd-toc-collapse" id="tocContents">
    <nav id="TableOfContents" aria-labelledby="docs-tocs">
      <ul class="toc-list">
        <!-- TOC items will be generated by JavaScript -->
      </ul>
    </nav>
  </div>
</div>

<style>
  @media (max-width: 1199.98px) {
    .bd-toc {
      margin-bottom: 1.5rem;
      order: -1;
    }
  }

  @media (min-width: 1200px) {
    .bd-toc {
      position: fixed;
      width: 16.666667%; /* col-xl-2 的宽度 */
      z-index: 1000;
      max-height: calc(100vh - 7rem);
    }
  }
</style>
